<template>
  <view class="container">
    <!-- 商品信息展示区域 -->
    <view v-for="(order, index) in pendingOrders" :key="index" class="shop-item">
      <view class="good">
        <image :src="order.images" mode="aspectFill" class="shop-img"></image>
        <view class="shop-text">
          <view class="order-info">
            <view class="order-id">订单号：{{ order.orderId }}</view>
            <view class="order-price">￥{{ (order.orderPrice * order.orderCount).toFixed(2) }}</view>
          </view>
          <view class="order-name">{{ order.orderName }}</view>
        </view>
        <view class="order-quantity">
          X {{ order.orderCount }}
        </view>
      </view>
      <button class="buy" @click="console.log('查看订单详情被点击')">查看订单详情</button>
    </view>

    <!-- 未找到订单提示 -->
    <view v-if="pendingOrders.length === 0" class="shop-else-list">
      没有找到待发货的订单。
    </view>
  </view>
</template>


<script>
	import config from '@/config.js'
	
	export default {
	  data() {
	    return {
	      pendingOrders: []
	    }
	  },
	  methods: {
	    fetchPendingOrders() {
	      uni.request({
	        url: `${config.apiUrl}/order/state/1`,
	        method: 'GET',
	        success: (response) => {
	          if (response.data && response.data.length > 0) {
	            this.pendingOrders = response.data;
	          } else {
	            uni.showToast({
	              title: '没有找到待发货的订单',
	              icon: 'none'
	            });
	          }
	        },
	        fail: (error) => {
	          console.error('获取待发货订单请求失败', error);
	          uni.showToast({
	            title: '请求失败，请重试',
	            icon: 'none'
	          });
	        }
	      });
	    }
	  },
	  created() {
	    this.fetchPendingOrders();
	  }
	}

</script>

<style>
.container {
  padding-bottom: 100rpx;
  background-color: #ffffff;
  height: 100%;
}

.shop-else-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18rpx;
}

.shop-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  background-color: #f5f5f5;
  margin: 20rpx 0;
  border-radius: 15rpx;
}

.good {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15rpx;
}

.shop-img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.shop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.order-info {
  display: flex;
  justify-content: space-between;
}

.order-id {
  font-size: 18rpx;
  color: #333;
}

.order-price {
  font-size: 18rpx;
  color: #333;
}

.order-name {
  font-size: 20rpx;
  color: #333;
}

.order-quantity {
  text-align: right;
  font-size: 18rpx;
  color: #666;
}

.buy {
  margin-top: 15rpx;
  align-self: flex-start;
  padding: 10rpx 25rpx;
  border: 1px solid #ff5400;
  background-color: #fff;
  color: #ff5400;
  border-radius: 5rpx;
  font-size: 16rpx;
  cursor: pointer;
}
</style>

